<template>
  <div class="page-container">
    <button class="back-button" @click="goToHome">
      <span class="icon-arrow-left"></span>
      返回首页
    </button>
    
    <div class="page-header">
      <h1>角色权限管理</h1>
      <p>管理系统角色及对应的权限分配</p>
    </div>
    
    <div class="content-wrapper">
      <div class="role-list">
        <div class="role-list-header">
          <h2>角色列表</h2>
          <button class="add-role-btn" @click="showAddRoleDialog = true">
            <span class="icon-plus"></span> 新增角色
          </button>
        </div>
        
        <div class="role-items">
          <div 
            class="role-item" 
            v-for="role in roles" 
            :key="role.id"
            :class="{ 'active': selectedRoleId === role.id }"
            @click="selectRole(role.id)"
          >
            <div class="role-info">
              <h3>{{ role.name }}</h3>
              <p>{{ role.description || '无描述' }}</p>
            </div>
            <div class="role-actions">
              <button class="edit-role" @click.stop="editRole(role)">编辑</button>
              <button class="delete-role" @click.stop="deleteRole(role.id)">删除</button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="permission-setting" v-if="selectedRole">
        <div class="permission-header">
          <h2>{{ selectedRole.name }} - 权限设置</h2>
          <button class="save-permission" @click="savePermission">保存权限设置</button>
        </div>
        
        <div class="permission-tree">
          <div class="permission-group" v-for="group in permissionGroups" :key="group.id">
            <div class="permission-group-header">
              <label class="checkbox-label">
                <input 
                  type="checkbox" 
                  v-model="group.checked"
                  @change="handleGroupCheck(group)"
                >
                <span class="checkmark"></span>
                <span class="group-name">{{ group.name }}</span>
              </label>
            </div>
            
            <div class="permission-items">
              <div class="permission-item" v-for="permission in group.permissions" :key="permission.id">
                <label class="checkbox-label">
                  <input 
                    type="checkbox" 
                    v-model="permission.checked"
                    @change="handlePermissionCheck(group)"
                  >
                  <span class="checkmark"></span>
                  <span class="permission-name">{{ permission.name }}</span>
                </label>
                <span class="permission-desc">{{ permission.description }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 新增/编辑角色弹窗 -->
    <div class="dialog-overlay" v-if="showAddRoleDialog || showEditRoleDialog">
      <div class="dialog-box">
        <div class="dialog-header">
          <h3>{{ showAddRoleDialog ? '新增角色' : '编辑角色' }}</h3>
          <button class="close-btn" @click="closeRoleDialog">&times;</button>
        </div>
        <div class="dialog-body">
          <form class="role-form">
            <div class="form-group">
              <label>角色名称 *</label>
              <input 
                type="text" 
                v-model="currentRole.name" 
                required
                class="form-input"
              >
            </div>
            <div class="form-group">
              <label>角色描述</label>
              <textarea 
                v-model="currentRole.description" 
                rows="3"
                class="form-textarea"
              ></textarea>
            </div>
          </form>
        </div>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="closeRoleDialog">取消</button>
          <button class="confirm-btn" @click="saveRole">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RolePermission',
  data() {
    return {
      roles: [
        { id: 1, name: '超级管理员', description: '拥有系统所有权限' },
        { id: 2, name: '部门经理', description: '管理部门相关事务' },
        { id: 3, name: '普通员工', description: '基础操作权限' }
      ],
      selectedRoleId: null,
      permissionGroups: [
        {
          id: 1,
          name: '用户管理',
          checked: false,
          permissions: [
            { id: 101, name: '查看用户', description: '查看系统用户列表', checked: false },
            { id: 102, name: '新增用户', description: '创建新用户', checked: false },
            { id: 103, name: '编辑用户', description: '修改用户信息', checked: false },
            { id: 104, name: '删除用户', description: '删除系统用户', checked: false }
          ]
        },
        {
          id: 2,
          name: '部门管理',
          checked: false,
          permissions: [
            { id: 201, name: '查看部门', description: '查看部门结构', checked: false },
            { id: 202, name: '新增部门', description: '创建新部门', checked: false },
            { id: 203, name: '编辑部门', description: '修改部门信息', checked: false },
            { id: 204, name: '删除部门', description: '删除部门', checked: false }
          ]
        },
        {
          id: 3,
          name: '工单管理',
          checked: false,
          permissions: [
            { id: 301, name: '查看工单', description: '查看所有工单', checked: false },
            { id: 302, name: '创建工单', description: '提交新工单', checked: false },
            { id: 303, name: '处理工单', description: '更新工单状态', checked: false },
            { id: 304, name: '关闭工单', description: '结束工单流程', checked: false }
          ]
        }
      ],
      showAddRoleDialog: false,
      showEditRoleDialog: false,
      currentRole: {
        id: null,
        name: '',
        description: ''
      }
    };
  },
  computed: {
    selectedRole() {
      return this.roles.find(role => role.id === this.selectedRoleId) || null;
    }
  },
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    selectRole(roleId) {
      this.selectedRoleId = roleId;
      // 在实际项目中，这里应该从后端加载该角色的权限
      this.resetPermissions();
      
      // 模拟加载权限数据
      if (roleId === 1) {
        // 超级管理员拥有所有权限
        this.permissionGroups.forEach(group => {
          group.checked = true;
          group.permissions.forEach(permission => {
            permission.checked = true;
          });
        });
      } else if (roleId === 2) {
        // 部门经理权限
        this.permissionGroups[0].checked = true;
        this.permissionGroups[0].permissions[0].checked = true;
        this.permissionGroups[0].permissions[1].checked = true;
        this.permissionGroups[0].permissions[2].checked = true;
        
        this.permissionGroups[1].checked = true;
        this.permissionGroups[1].permissions.forEach(permission => {
          permission.checked = true;
        });
        
        this.permissionGroups[2].checked = true;
        this.permissionGroups[2].permissions[0].checked = true;
        this.permissionGroups[2].permissions[2].checked = true;
        this.permissionGroups[2].permissions[3].checked = true;
      } else if (roleId === 3) {
        // 普通员工权限
        this.permissionGroups[0].checked = false;
        this.permissionGroups[0].permissions[0].checked = true;
        
        this.permissionGroups[1].checked = false;
        this.permissionGroups[1].permissions[0].checked = true;
        
        this.permissionGroups[2].checked = true;
        this.permissionGroups[2].permissions[0].checked = true;
        this.permissionGroups[2].permissions[1].checked = true;
      }
    },
    resetPermissions() {
      this.permissionGroups.forEach(group => {
        group.checked = false;
        group.permissions.forEach(permission => {
          permission.checked = false;
        });
      });
    },
    handleGroupCheck(group) {
      group.permissions.forEach(permission => {
        permission.checked = group.checked;
      });
    },
    handlePermissionCheck(group) {
      const allChecked = group.permissions.every(permission => permission.checked);
      const noneChecked = group.permissions.every(permission => !permission.checked);
      
      if (allChecked) {
        group.checked = true;
      } else if (noneChecked) {
        group.checked = false;
      } else {
        group.checked = false; // 部分选中时不勾选父级
      }
    },
    savePermission() {
      // 收集选中的权限
      const selectedPermissions = [];
      this.permissionGroups.forEach(group => {
        group.permissions.forEach(permission => {
          if (permission.checked) {
            selectedPermissions.push(permission.id);
          }
        });
      });
      
      console.log(`角色 ${this.selectedRole.name} 的权限已保存:`, selectedPermissions);
      alert(`角色 ${this.selectedRole.name} 的权限设置已保存`);
    },
    editRole(role) {
      this.currentRole = { ...role };
      this.showEditRoleDialog = true;
    },
    deleteRole(roleId) {
      if (roleId === 1) { // 禁止删除超级管理员
        alert('超级管理员角色不能删除');
        return;
      }
      
      if (confirm('确定要删除这个角色吗？')) {
        this.roles = this.roles.filter(role => role.id !== roleId);
        if (this.selectedRoleId === roleId) {
          this.selectedRoleId = null;
        }
      }
    },
    closeRoleDialog() {
      this.showAddRoleDialog = false;
      this.showEditRoleDialog = false;
      this.currentRole = { id: null, name: '', description: '' };
    },
    saveRole() {
      if (!this.currentRole.name) {
        alert('请输入角色名称');
        return;
      }
      
      if (this.showAddRoleDialog) {
        // 新增角色
        const newId = Math.max(...this.roles.map(r => r.id), 0) + 1;
        this.roles.push({
          ...this.currentRole,
          id: newId
        });
      } else {
        // 编辑角色
        const index = this.roles.findIndex(r => r.id === this.currentRole.id);
        if (index !== -1) {
          this.roles[index] = { ...this.currentRole };
        }
      }
      
      this.closeRoleDialog();
    }
  },
  mounted() {
    // 默认选中第一个角色
    if (this.roles.length > 0) {
      this.selectedRoleId = this.roles[0].id;
      this.selectRole(this.roles[0].id);
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.page-header {
  margin: 20px 0 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.page-header h1 {
  margin-bottom: 10px;
  color: #333;
}

.page-header p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.content-wrapper {
  display: flex;
  gap: 20px;
}

.role-list {
  width: 300px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.role-list-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.role-list-header h2 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.add-role-btn {
  padding: 5px 10px;
  background-color: #2ecc71;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.2s;
}

.add-role-btn:hover {
  background-color: #27ae60;
}

.role-items {
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.role-item {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.role-item:hover {
  background-color: #f9f9f9;
}

.role-item.active {
  background-color: #f0f7ff;
  border-left: 3px solid #3498db;
}

.role-info h3 {
  margin: 0 0 5px 0;
  font-size: 15px;
  color: #333;
}

.role-info p {
  margin: 0;
  font-size: 13px;
  color: #666;
}

.role-actions {
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.2s;
}

.role-item:hover .role-actions {
  opacity: 1;
}

.edit-role, .delete-role {
  padding: 3px 8px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.edit-role {
  background-color: #f0f0f0;
  color: #333;
}

.edit-role:hover {
  background-color: #e0e0e0;
}

.delete-role {
  background-color: #ffebee;
  color: #e74c3c;
}

.delete-role:hover {
  background-color: #fce4e7;
}

.permission-setting {
  flex: 1;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.permission-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.permission-header h2 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.save-permission {
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.save-permission:hover {
  background-color: #2980b9;
}

.permission-tree {
  padding: 20px;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.permission-group {
  margin-bottom: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.permission-group-header {
  padding: 10px 15px;
  background-color: #f8f9fa;
  font-weight: 500;
}

.permission-items {
  padding: 10px 15px 10px 35px;
  background-color: #fff;
}

.permission-item {
  padding: 8px 0;
  border-bottom: 1px dashed #f0f0f0;
}

.permission-item:last-child {
  border-bottom: none;
}

.permission-name {
  margin-right: 10px;
  font-size: 14px;
}

.permission-desc {
  font-size: 12px;
  color: #999;
}

/* 复选框样式 */
.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: relative;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-right: 8px;
  transition: all 0.2s;
}

.checkbox-label input:checked ~ .checkmark {
  background-color: #3498db;
  border-color: #3498db;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-label input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-label .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-box {
  background-color: white;
  border-radius: 6px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.dialog-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #333;
}

.dialog-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #555;
  font-weight: 500;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-textarea {
  resize: vertical;
}

.dialog-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn, .confirm-btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #333;
  border: none;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.confirm-btn {
  background-color: #3498db;
  color: white;
  border: none;
}

.confirm-btn:hover {
  background-color: #2980b9;
}

/* 图标样式 */
.icon-arrow-left::before {
  content: '←';
}

.icon-plus::before {
  content: '+';
}

/* 响应式调整 */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .role-list {
    width: 100%;
  }
  
  .role-items {
    max-height: 300px;
  }
}
</style>